<!--修改个人信息页面-->
{% extends 'personalLayout.html' %}
{% load static %}
{% block title %}
    <title>修改个人信息</title>
{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/updatePersonalInfo.css' %}" type="text/css">
{% endblock %}


{% block content %}
    <div class="title-and-button">
        <h2>个人信息</h2>
        <div>
            <a class="button btn btn-primary" id="go-alter">确认修改</a>
        </div>
    </div>
    <!-- 表单 -->
    <form method="POST" id="update-info" enctype="multipart/form-data" novalidate>
        <div class="part" style="position: relative">
            <img alt="用户头像" src="{% static result.img_url %}" id="user-img"
                 class="img-circle">
            <div class="mask-img" id="select_img_file">
                <i class="fa fa-file-image-o fa-4x"></i>
            </div>
            <div style="display: none;">
                {{ form.headImg }}
            </div>
        </div>

        <div class="part">
            <div class="my-form-group">
                <label for="id_nickname">昵称</label>
                {{ form.name }}
                <p class="error-msg"></p>
            </div>
            <div class="my-form-group">
                <label for="id_telephone">电话号码</label>
                {{ form.phone }}
                <p class="error-msg"></p>
            </div>
            <div class="my-form-group">
                <label for="id_position">职位</label>
                {{ form.position }}
            </div>
        </div>

        <div class="part">
            <div class="my-form-group">
                <label for="id_usertype">账户类型</label>
                <input type="text" id="id_usertype" readonly value="{{ result.user_type }}"
                       class="form-control my-input" name="usertype" style="cursor: not-allowed">
            </div>
            <div class="my-form-group">
                <label for="id_username">用户名</label>
                <input type="text" id="id_username" readonly value="{{ result.username }}"
                       class="form-control my-input" name="username" style="cursor: not-allowed">
            </div>
            <div class="my-form-group">
                <label for="id_password">密码</label>
                {{ form.password }}
                <p class="error-msg"></p>
            </div>
        </div>


    </form>
    {% if result.user_type == '管理员' %}
        <!-- 员工信息 -->
        <div class="staff-info">
            <h2 style="margin:20px 0 20px 50px">员工信息</h2>
            <table class="table">
                <thead>
                <tr class="table-info">
                    <th scope="col"># ID</th>
                    <th scope="col">用户名</th>
                    <th scope="col">密码</th>
                    <th scope="col">昵称</th>
                    <th scope="col">手机号码</th>
                    <th scope="col">账户类型</th>
                    <th scope="col">职位</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>
                {% for item in result.user_info %}
                    <tr>
                        <td>{{ item.userId }}</td>
                        <td>{{ item.username }}</td>
                        <td>{{ item.password }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.phone }}</td>
                        <td>{{ item.admin_type }}</td>
                        <td>{{ item.position }}</td>
                        <td><a class="my-delete" data-id="{{ item.userId }}" data-name="{{ item.name }}"
                               data-toggle="modal" data-target="#DeleteModal">删除</a></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <!-- 员工信息 -->
        <!-- 分页 -->
        <div class="my-page-div">
            {{ result.div }}
            <ul class="pagination page">
                {% for li in result.page_list %}
                    {{ li }}
                {% endfor %}
            </ul>
        </div>
        <!-- 分页 -->
    {% endif %}
{% endblock %}
{% block other %}
    <!-- Modal -->
    <div class="modal fade" id="DeleteModal" tabindex="-1" aria-labelledby="DeleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="DeleteModalLabel">确认删除？</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="POST" id='delete-form'>
                        <div class="form-group">
                            <label for="user_id">员工编号</label>
                            <input type="text" class="form-control" id="user_id" name="user_id" readonly>
                        </div>
                        <div class="form-group">
                            <label for="user_name">昵称</label>
                            <input type="text" class="form-control" id="user_name" name="user_name" readonly>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="delete-btn">确认删除</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    {% if messages %}
        <script>
            {% for msg in messages %}
                alert('{{ msg.message }}');
            {% endfor %}
        </script>
    {% endif %}
    <script src="{% static 'js/alterInfo.js' %}" type="text/javascript"></script>
{% endblock %}